<template>
  <view class="page">
    <view class="top-bg">
      <image
        :lazy-load="true"
        class="bg"
        :src="imgBaseUrlV0 + 'service-record-bg.png'"
        mode="widthFix"
      ></image>
      <view class="bg-title">
        <text class="chn">服务记录</text>
        <text class="en">Service record</text>
      </view>
    </view>

    <view class="service-records" v-if="serviceOrderRecords.length !== 0">
      <view
        class="service-record"
        v-for="serviceOrderRecord in serviceOrderRecords"
        :key="serviceOrderRecord.id"
        :class="[
          serviceOrderRecord.status !== 2 || serviceOrderRecord.status !== 3
            ? ''
            : 'finished',
        ]"
        @click="openServiceRecordDetail(serviceOrderRecord)"
      >
        <image
          :lazy-load="true"
          class="icon"
          :src="imgBaseUrlV0 + 'service-record-icon.png'"
          mode="widthFix"
        ></image>
        <view class="info">
          <text class="title">{{
            title(
              serviceOrderRecord.equipmentId,
              serviceOrderRecord.serviceType
            )
          }}</text>
          <text class="time"
            >申请时间：{{ getDateTime(serviceOrderRecord.creationTime) }}</text
          >
        </view>
        <image
          :lazy-load="true"
          class="status-icon"
          :src="serviceOrderRecord.statusIcon"
          mode="widthFix"
        ></image>
        <text class="status-text" v-if="false">
          {{
            serviceOrderRecord.status == 0
              ? "待审核"
              : serviceOrderRecord.status == 1
              ? "进行中"
              : serviceOrderRecord.status == 2
              ? "已完成"
              : serviceOrderRecord.status == 3
              ? "已关闭"
              : ""
          }}
        </text>
      </view>
    </view>
    <view v-else style="text-align: center">暂无服务记录！</view>
  </view>
</template>

<script>
import { getDateTime } from "@/common/util.js";
import { getEquipmentOptions } from "@/common/api/equipment.js";
import { getServiceTypeEnum } from "@/common/api/service-project.js";
import { getServiceOrderRecords2 } from "@/common/api/service-order-record.js";

import { imgBaseUrl, imgBaseUrlV0 } from "@/common/config/index";
export default {
  data() {
    return {
      equipment: null,
      imgBaseUrlV0,
      serviceTypeOptions: [],
      equipmentOptions: [],
      serviceOrderRecords: [],
    };
  },
  async onLoad(e) {
    if (e.equipment !== undefined) {
      this.equipment = JSON.parse(decodeURIComponent(e.equipment));
    }

    this.init();
    await this.initData();
  },
  computed: {
    title() {
      return (equipmentId, serviceType) => {
        if (
          this.equipmentOptions.length !== 0 &&
          this.serviceTypeOptions.length !== 0
        ) {
          const equipmentName = this.equipmentOptions.filter(
            (item) => item.value === equipmentId
          )[0].label;
          const type = this.serviceTypeOptions.filter(
            (item) => item.value === serviceType
          )[0].label;
          return equipmentName + "申请的" + type + "服务";
        } else {
          return "";
        }
      };
    },
  },
  methods: {
    getDateTime,
    init() {},
    async initData() {
      await Promise.all([
        this.getEquipmentOptions(),
        this.getServiceTypeEnum(),
        this.getServiceOrderRecords(),
      ]);
    },
    getEquipmentOptions() {
      return getEquipmentOptions().then((response) => {
        this.equipmentOptions = response;
      });
    },
    getServiceTypeEnum() {
      return getServiceTypeEnum().then((response) => {
        this.serviceTypeOptions = response;
      });
    },
    async getServiceOrderRecords() {
      await getServiceOrderRecords2({ device_id: this.equipment.id }).then(
        (response) => {
          let o = {
            2: "https://rhws.oss-cn-chengdu.aliyuncs.com/icon_v1/yiwancheng.png",
            3: "https://rhws.oss-cn-chengdu.aliyuncs.com/icon_v1/yiguanbi.png",
            0: "https://rhws.oss-cn-chengdu.aliyuncs.com/icon_v1/daigoutong.png",
            1: "https://rhws.oss-cn-chengdu.aliyuncs.com/icon_v1/jinxingzhong.png",
          };
          response.forEach((i) => {
            // /7.png
            i.statusIcon = o[i.status] || o[0];
          });
          this.serviceOrderRecords = response;
        }
      );
    },
    openServiceRecordDetail(e) {
      uni.navigateTo({
        url:
          "/pages/service-order-detail/service-order-detail?serviceOrderRecord=" +
          encodeURIComponent(JSON.stringify(e)),
      });
    },
  },
};
</script>

<style lang="scss" scoped>
page,
.page {
  min-height: calc(100vh - var(--window-top) - var(--window-top));
  background-color: #fff;
}

.top-bg {
  position: relative;
  background-color: #fff;

  .bg {
    width: 100%;
  }
  .bg-title {
    position: absolute;
    height: 100rpx;
    top: 50%;
    width: 300rpx;
    left: 50%;
    margin-left: -150rpx;
    text-align: center;
    margin-top: -55rpx;

    .chn {
      display: block;
      font-size: 32rpx;
      font-weight: 700;
      line-height: 50rpx;
      color: #fff;
    }
    .en {
      display: block;
      font-size: 22rpx;
      line-height: 30rpx;
      color: #ddd;
    }
  }
}

.service-records {
  padding: 0 30rpx;
  position: relative;
  top: -60rpx;

  .service-record {
    display: flex;
    flex-direction: row;
    background-color: #2d63ba;
    padding: 30rpx;
    border-radius: 10rpx;
    margin-bottom: 30rpx;
    position: relative;
    overflow: hidden;
    perspective: 1000;

    &:last-child {
      margin-bottom: 0;
    }
    &.finished {
      background-color: #aaa;
    }
    .icon {
      width: 60rpx;
      margin: auto;
    }
    .info {
      flex: 1;
      color: #fff;
      padding-left: 20rpx;
      padding-right: 170rpx;

      .title {
        display: block;
        line-height: 60rpx;
        font-size: 30rpx;
        font-weight: 700;

        overflow: hidden;
        word-break: break-all; /* break-all(允许在单词内换行。) */
        text-overflow: ellipsis; /* 超出部分省略号 */
        display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
        -webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
        -webkit-line-clamp: 1; /** 显示的行数 **/
      }
      .time {
        display: block;
        line-height: 60rpx;
        font-size: 24rpx;
      }
    }
    .status-icon {
      position: absolute;
      width: 200rpx;
      right: -40rpx;
      top: -56rpx;
    }
    .status-text {
      position: absolute;
      right: 20rpx;
      top: 30rpx;
      color: #fff;
      transform: rotate(-40deg);
    }
  }
}
</style>